<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>协信微博展示</title>
<script type="text/javascript" src="<c:url value='/resources/commons/js/jquery-1.7.2.min.js ' />"></script>
<style type="text/css">
body {
	font: 12px/1.5 "微软雅黑";
	color: #666;
	margin: 0px;
	padding: 0px;
}

input,textarea {
	outline: none;
	font-family: "微软雅黑";
	color: #666;
}

ul,li,dd,dl,dt {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

h1,h2,h3,h4,h5,h6,p {
	padding: 0px;
	margin: 0px;
}

img {
	border: 0px;
}

.clearfix:after {
	content: "\20";
	display: block;
	height: 0;
	clear: both;
}

.clearfix {
	*zoom: 1;
	_zoom: 1
}

.y_p {
	padding: 0px 15px;
	margin-bottom: 15px;
}

.y_p_left {
	float: left;
	width: 40px;
	height: 40px;
	background: #000;
	margin-right: 7px;
}

.y_p_right {
	float: left;
	width: 160px;
	line-height: 18px;
	height: 40px;
	overflow: hidden;
	color: #999;
}

.more {
	/* position: absolute;
	bottom: 10px;
	right: 20px; */
	float:right;
	margin-bottom: 10px;
	margin-top: 10px;
	margin-right: 10px;
}

.more a {
	color: #555555;
}
</style>
<script type="text/javascript">
	function more() {
		window.parent.location.href = "http://www.baidu.com";
	}

	$(document).ready(function() {
		$(".y_p_right").each(function() {
			var height = $(this).outerHeight(true);
			if (height > 40) {
				var text = $(this).text();
				text = text.substr(0, 25) + "...";
				$(this).text(text);
			}
		});

		var message = new Array();
		message.push("您将找到许多可以在线编辑并测试的您将找到许多可以在线编辑并测试的您将找到许多可以在线编辑并测试的您将找到许多可以在线编辑并测试的");
		message.push("bbbbbbbd的发射点发射点第三方爱的色放阿德fasdfsadfbbbbbbb");
		message.push("cccccccccccc的fads发打发的阿达cccccccccc");
		message.push("dddddd打发士大夫地方地方ddddddddd");
		message.push("5.您将找到许多可以在线编辑并测试的您将找到许多可以在线编辑并测试的您将找到许多可以在线编辑并测试的您将找到许多可以在线编辑并测试的");
		var handler = function() {
			$(".y_p").each(function(i, n) {
				if (i == 0) {
					$(n).fadeOut(3000);
					$("#weibos").append('<div class="y_p clearfix"><div class="y_p_left"><img width="40" height="40" alt="协信" src="http://tp4.sinaimg.cn/2143462671/50/5601441041/1"></div><div class="y_p_right">'+ message[Math.ceil(Math.random() * 3)]+ '</div></div>');
					//resizeFrame();
					$(n).remove();
				}
			});
		};
		setInterval(handler, 1000);
	});

	// 更改Iframe高度
	function resizeFrame() {
		var weiboFrame = window.parent.document.getElementById("weiboFrame");//获取iframeID
		$(weiboFrame).load();
	}
</script>
</head>

<body>
	<div id="weibos">
		<div class="y_p clearfix">
			<div class="y_p_left">
				<img width="40" height="40" alt="协信" src="http://tp4.sinaimg.cn/2143462671/50/5601441041/1">
			</div>
			<div class="y_p_right">sis是一个特殊的样式，有关解释是这样的：text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略...</div>
		</div>
		<div class="y_p clearfix">
			<div class="y_p_left">
				<img width="40" height="40" alt="协信" src="http://tp4.sinaimg.cn/2143462671/50/5601441041/1">
			</div>
			<div class="y_p_right">江北青年助力转型sis是一个特殊的样式，有关解释是这样的：text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略教务一行链新闻链接新闻...</div>
		</div>
		<div class="y_p clearfix">
			<div class="y_p_left">
				<img width="40" height="40" alt="协信" src="http://tp4.sinaimg.cn/2143462671/50/5601441041/1">
			</div>
			<div class="y_p_right">江北青年助力转型sis是一个特殊的样式，有关解释是这样的：text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略教务一行链新闻链接新闻...</div>
		</div>
		<div class="y_p clearfix">
			<div class="y_p_left">
				<img width="40" height="40" alt="协信" src="http://tp4.sinaimg.cn/2143462671/50/5601441041/1">
			</div>
			<div class="y_p_right">江北青年助力转型sis是一个特殊的样式，有关解释是这样的：text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略教务一行链新闻链接新闻...</div>
		</div>
		<div class="y_p clearfix">
			<div class="y_p_left">
				<img width="40" height="40" alt="协信" src="http://tp4.sinaimg.cn/2143462671/50/5601441041/1">
			</div>
			<div class="y_p_right">江北青年助力转型sis是一个特殊的样式，有关解释是这样的：text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略教务一行链新闻链接新闻...</div>
		</div>

	</div>
	<div class="more">
		<a href="javascript:void(0);" onclick="more()">更多</a>
	</div>
</body>
</html>
